<% var headContent = { %>
<!-- //这里包含需要引入的其他css/js文件 -->
<link rel="stylesheet" href="${base}/template/common/css/datetimepicker/amazeui.datetimepicker.css"/>
<script type="text/javascript" src="${base}/template/common/js/datetimepicker/amazeui.datetimepicker.js"></script>
<script type="text/javascript" src="${base}/template/common/js/datetimepicker/locales/amazeui.datetimepicker.zh-CN.js" charset="UTF-8"></script>
  <script type="text/javascript" src="${base}/ueditor/ueditor.config.js?jid=3"></script>
  <script type="text/javascript" src="${base}/ueditor/ueditor.all.min.js?jid=3"></script>
  <script type="text/javascript" src="${base}/ueditor/ueditor.parse.min.js?jid=3"></script>
  <script type="text/javascript" charset="utf-8" src="${base}/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="${base}/template/admin/js/utils.js" charset="UTF-8"></script>
<style>

/*验证：提示信息样式 begin*/
.am-alert-danger {
	background-color: transparent;
	border-color: transparent;
	color: red;
}

.am-alert {
	margin-bottom: 1em;
	padding: .625em;
	background: transparent;
	border: none;
	border-radius: 0;
}
/*验证：提示信息样式 end*/
/*附件上传*/
.am-progress-xs {
  height: .2rem;
}
.am-progress {
  margin-bottom: 0;
}
</style>
<%};%> <%layout("/common/_layout.html",{head:headContent}){%>
<form method="post" class="am-form" id="noticeForm"
	action="${base}/notice/save">
	<!--选项卡（tabs）begin-->
	<div class="am-tabs am-margin" data-am-tabs>
		<ul class="am-tabs-nav am-nav am-nav-tabs">
			<li class="am-active"><a href="#tab1">新闻资讯/广播消息详细信息</a></li>
		</ul>
		<div class="am-tabs-bd">
			<div class="am-tab-panel am-fade am-in am-active" id="tab1">
				<input name="noticeID" id="noticeID" type="hidden"
					value="${noticeID!}" />
				<!--验证表单元素（validate) begin-->

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">所属企业</div>
					<div class="am-u-sm-6 am-u-md-6">
						<select data-am-selected name="orgID">
							<option value="37714">大掌柜</option>
						</select>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">
						<span style="color: red;">*</span>类型
					</div>
					<div class="am-u-sm-6 am-u-md-6">
						<select data-am-selected name="noticeType">
							<option value="0"<%if(noticeType! == 0)
								{%>selected<%}%>>新闻资讯</option>
							<!-- <option value="1"<%if(noticeType! == 1)
								{%>selected<%}%>>广播消息</option>
							<option value="2"<%if(noticeType! == 2)
								{%>selected<%}%>>消息管理</option> -->
						</select>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">是否发布</div>
					<div class="am-u-sm-12 am-u-md-4 switch-button">
						<input id="isPublish" name="isPublish" type="checkbox" data-size='xs'
							data-am-switch data-off-text="否" data-on-text="是"<%if
						(noticeEnabled! == null || noticeEnabled! == 1){%> checked <%}%> > <input type="hidden"
							class="am-input-sm" name="noticeEnabled" id="noticeEnabled"
							value="${noticeEnabled!1}" />
					</div>
					<div class="am-hide-sm-only am-u-md-1" style="color: red;"></div>
					<div class="am-u-sm-2 am-u-md-5 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">是否置顶</div>
					<div class="am-u-sm-12 am-u-md-4 switch-button">
						<input id="isTopLayer" name="isTopLayer" type="checkbox" data-size='xs'
							data-am-switch data-off-text="否" data-on-text="是"<%if
						(isTop! == 1){%> checked <%}%> > <input type="hidden"
							class="am-input-sm" name="isTop" id="isTop" value="${isTop!0}" />
					</div>
					<div class="am-hide-sm-only am-u-md-1" style="color: red;"></div>
					<div class="am-u-sm-2 am-u-md-5 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">
						<span style="color: red;">*</span>新闻资讯/广播消息标题
					</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input name="noticeTitle" class="js-ajax-validate"
							data-validate-async data-validation-message="标题可输入2-64个字符"
							type="text" id="noticeTitle" value="${noticeTitle!}" minlength="2"
							maxlength="64" placeholder="标题可输入2-64个字符" required />
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">新闻图片</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input type="text" id="imageUrl" name="imageUrl" maxlength="200" value="${imageUrl!}" placeholder="请上传 *.gif,*.jpg,*.jpeg,*.png 文件，宽720高任意" />
					</div>
					<div class="am-u-sm-2 am-u-md-4">
						<div class="am-form-file am-text-xs">
              <button type="button" class="am-btn am-btn-primary am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 选择要上传的文件
              </button>
              <input id="fileupload" type="file" name="files[]" multiple>
            </div>
            <!-- The global progress bar -->
            <div id="progress-area" class="am-margin-top-sm am-hide">
              <div id="progress-text" class="am-text-xs am-text-right"></div>
              <div id="progress" class="am-progress am-progress-xs">
                <div class="am-progress-bar" style="width: 0%"></div>
              </div>
            </div>
					</div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">简短描述</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input type="text" class="am-input" name="shortDesc"
							maxlength="200" value="${shortDesc!}" />
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">资讯内容</div>
					<div class="am-u-sm-6 am-u-md-6">
						<script id="noticeDetail" name="noticeDetail" type="text/plain">
                        ${noticeDetail!}
                </script>
					</div>
					<div class="am-u-sm-2 am-u-md-4">&nbsp;</div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">发布时间/创建时间</div>
					<div class="am-u-sm-6 am-u-md-6">
						<div class="am-input-group date form_datetime"
							data-date="2015-02-14 14:45">
							<span class="am-input-group-label add-on"><i
								class="icon-th am-icon-calendar"></i></span> <input id="publishTime" name="publishTime"
								size="16" type="text" value="${publishTime!, dateFormat="yyyy-MM-dd HH:mm:ss"}"
								class="am-form-field" required /> <span
								class="am-input-group-label add-on"><i
								class="icon-remove am-icon-close"></i></span>
						</div>
						<label class="lable-alert" for="addDate"></label>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">排序</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input type="text" class="am-input js-pattern-sort"
							name="noticeSort" data-validation-message="排序不能为空且只能是纯数字"
							placeholder="请输入纯数字,越小越向前" maxlength="11" required
							value="${noticeSort!99}" />
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">SEO标题</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input type="text" class="am-input" name="seoTitle"
							maxlength="100" value="${seoTitle!}" />
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">SEO关键词</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input type="text" class="am-input" name="seoKeywords"
							maxlength="100" value="${seoKeywords!}" />
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">SEO描述</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input type="text" class="am-input" name="seoDescription"
							maxlength="100" value="${seoDescription!}" />
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>
			</div>
			<!--验证表单元素（validate end-->
		</div>
	</div>
	<!--选项卡（tabs）end-->
	<div class="am-margin">
		<button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
		<button type="button" class="am-btn am-btn-warning am-btn-xs"
			onclick="javascript:history.go(-1);">返回上一级</button>
	</div>
</form>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="${base}/template/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="${base}/template/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="${base}/template/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<script type="text/javascript">

    $(function(){
    // 初始化时间
    if($("#publishTime").val() == ''){
        $("#publishTime").val(new Date().format("yyyy-MM-dd hh:mm:ss"));
    }
    	
    var $mycheckbox = $('.switch-button');
    $mycheckbox.each(function() {
        $("#isPublish").on({
            'switchChange.bootstrapSwitch' : function(event, state) {
                if (state.toString() == "true") {
                    $("#noticeEnabled").val("1");
                } else {
                    $("#noticeEnabled").val("0");
                }
            }
        });
        
        $("#isTopLayer").on({
            'switchChange.bootstrapSwitch' : function(event, state) {
                if (state.toString() == "true") {
                    $("#isTop").val("1");
                } else {
                    $("#isTop").val("0");
                }
            }
        });
    });

    /*上传图片 begin*/
    var jqXHR = $('#fileupload').fileupload({
      url: "${base}/upload/image/",
      dataType: 'json',
      start: function (e) {
        $("#progress-area").removeClass("am-hide");
        $("#progress-text").removeClass("am-text-danger");
        $("#progress-text").html("");
        $(".am-progress-bar").css("width","0%");
      },
      done: function (e, data) {
        console.log(data);
        $("#imageUrl").val(data.result.url);
        setTimeout(function() {
          $("#progress-area").addClass("am-hide");    
        },1500);        
      },
      progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $(".am-progress-bar").css("width",progress + "%");
        $("#progress-text").html(progress + "%");
      },
      error: function (jqXHR, textStatus, errorThrown) {
        console.log("imageupload error！");
        // console.log(jqXHR);
        // console.log(textStatus);
        // console.log(errorThrown);
        $("#progress-area").removeClass("am-hide");
        $("#progress-text").addClass("am-text-danger");
        $("#progress-text").html("imageupload error！");
        $(".am-progress-bar").css("width","0%");
        setTimeout(function() {
          $("#progress-area").addClass("am-hide");    
        },2000);
      },
      fail: function (jqXHR, textStatus) {
        console.log("imageupload fail！");
        // console.log(jqXHR);
        // console.log(textStatus);
        $("#progress-area").removeClass("am-hide");
        $("#progress-text").addClass("am-text-danger");
        $("#progress-text").html("imageupload fail！");
        $(".am-progress-bar").css("width","0%");
        setTimeout(function() {
          $("#progress-area").addClass("am-hide");    
        },2000);
      }
    });
    /*上传图片 end*/
    
    /*表单验证：begin*/
    //自定义规则，用法：验证元素上加class="js-pattern-sort"
    if ($.AMUI && $.AMUI.validator) {
      $.AMUI.validator.patterns.sort = /^([0-9]+)$/;
    }
    $("#noticeForm").validator({
      // 域通过验证时回调
      onValid: function(validity) {
        $(validity.field).closest('.am-form-group').find('.am-alert').hide();
      },
      // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
      onInValid: function(validity) {
        var $field = $(validity.field);
        var $group = $field.closest('.am-form-group');
        var $alert = $group.find('.am-alert');
        // 使用自定义的提示信息 或 插件内置的提示信息
        var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

        if (!$alert.length) {
          $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
          appendTo($group.find(".input-msg"));
        }
        console.log("onInValid : "+$field.val());
        $alert.html(msg).show();
      }
    });
    /*表单验证：end*/
    
    /*日历控件 begin*/
      var mydatetime = $('.form_datetime').datetimepicker({
        language:  'zh-CN',//语言设置，默认使用英语 'en' ,额外添加amazeui.datetimepicker.zh-CN.js,注意编码格式charset="UTF-8"
        format: 'yyyy-mm-dd hh:ii:ss',//日期格式：接受String,默认为mm/dd/yyyy
        autoclose: true,//日期选定以后是否自动关闭日期选择器, 默认为 true (仅在 days(今日) 视图有效)。
        todayBtn: true,//是否显示今日视图
        todayHighlight: true,//是否高亮显示今天的日期
        minuteStep: 15,//设置分钟视图时间间隔数，默认为 5
        pickerPosition: 'bottom-right'//'bottom-right' (默认)、'bottom-left'、'top-right'、'top-left'
      });
      mydatetime.on('show', function(ev){//绑定事件
        //alert('datetimepciker 显示了');
      });
      /*日历控件 end*/
      
    /*富文本编辑器：ueditor begin*/
    var ue = UE.getEditor('noticeDetail');
    /*富文本编辑器：ueditor end*/
      
});
</script>
<%}%>
